<template>
  <div>
    <div class="m-panel bg-w mh-pd">
      <div class="panel-head">
        <h4 style="color:#FFBC53; margin-bottom:1rem;">未审核</h4>
      </div>
      <div class="panel-content">

          <!-- slides -->
          <div class="m-sw" v-for="item in newArr" :key="item.id">
            <div class="flex sw-item" @tap='toView(item.id)'>
              <div class="con-l">
                <div class="pic-box">
                  <img :src="item.image">
                </div>
              </div>
              <div class="con-r">
                <p class="con-name mui-ellipsis" v-text="item.name"></p>
                <p class="con-rest">{{item.activity_address}}|男{{item.limit_boy}}|女{{item.limit_girl}}</p>
              </div>
            </div>
          </div>

      </div>
    </div>

    <div class="m-panel bg-w mh-pd">
      <div class="panel-head">
        <h4 style="color:#88BD77; margin-bottom:1rem;">已审核</h4>
      </div>
      <div class="panel-content">
          <!-- slides -->
          <div class="m-sw" v-for="item in oldArr" :key="item.id">
            <div class="flex sw-item" @tap='toView(item.id)'>
              <div class="con-l">
                <div class="pic-box">
                  <img :src="item.image">
                </div>
              </div>
              <div class="con-r">
                <p class="con-name mui-ellipsis" v-text="item.name"></p>
                <p class="con-rest">{{item.activity_address}}|男{{item.limit_boy}}|女{{item.limit_girl}}</p>
              </div>
            </div>
          </div>
      </div>
    </div>


  </div>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import {MH_API} from "@/api/api";
  export default {
    name: "matchmaker-review",
    data () {
      return {
        swiperOptionFilt: {
          loop: false,
          slidesPerView: 3,
          slidesPerColumn: 3,
          spaceBetween: 15,
          slidesPerColumnFill : 'row'
        },
        activeNav: 1,
        recentContacter: [
          {
            id: '10001',
            pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=766585699,506578438&fm=26&gp=0.jpg',
            name: '章叁',
            sex: 2,
            edu: '本科',
            level: 'A+',
            age: 23
          }
        ],
        newArr: [],
        oldArr: [],
        allNum: 0,
        newNum: 0,
        oldNum: 0
      }
    },
    computed: {
      swiper() {
        return this.$refs.recentContact.swiper
      }
    },
    components: {
      MhHeader,
      swiper,
      swiperSlide
    },
    methods: {
      switchTap (i) {
        this.activeNav = i;
        this.getData();
      },
      toView(id){
        this.$router.push({
          path: 'interact',
          query: {
            id: id
          }
        })
      },
      getData(){
        let self = this;
        MH_API.getActivityList({
          type: 0
        }).then(res => {
          if (res.status === 200) {
            self.allNum = res.data.length;
          }
        })
        MH_API.getActivityList({
          type: 1
        }).then(res => {
          if (res.status === 200) {
            self.newArr = res.data;
            self.newNum = res.data.length;
          }
        })
        MH_API.getActivityList({
          type: 2
        }).then(res => {
          if (res.status === 200) {
            self.oldArr = res.data;
            self.oldNum = res.data.length;
          }
        })
      }
    },
    created(){
      this.getData();
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .review-tab>a {
    width: 5.5rem;
    height: 2.6rem;
    line-height: 2.6rem;
    border-radius: 1.3rem;
    background: #fcf3f6;
    color: #e685aa;
    text-align: center;
    font-size: 1.2rem;
    &.active {background: #e685aa;color: #fff;}
  }
  .pic-txt,.pic-box {
    padding: 0 2rem .5rem;
    border-bottom: .05rem solid #eee;
  }
  .pic-txt>span {font-size: 1.2rem; color: #666;}
  .pic-box {margin-top: 1rem; padding:0;}
  .pic-box>img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
  }

  .panel-head {
    h4,h4>span {
      @include sc(1.5rem, #333);
      font-weight: bold;
    }
  }
  .pic-box {
    background-color: #eee;
    @include mh-avatar-box(4rem, 4rem); margin-right:1rem;
  }
  .con-rest {position: relative;@include sc(1.2rem, #999)}
  .con-name {position: relative;@include sc(1.3rem, #333)}
  .panel-content .m-sw {margin-right: 0;}
  .m-sw { float:left;width: 50%!important;margin-right: 0!important; margin-bottom:1rem; height:4rem; overflow:hidden;}
  .boy:after,.girl:after {
    display: inline-block;
    width: 1.15rem;
    height: 1.15rem;
    margin-left: .4rem;
    content: '';
    vertical-align: middle;
  }
  .boy:after {
    background: url("../../assets/images/hnico/ic_boy.png") no-repeat center center;
    background-size: 100% 100%;
  }
  .girl:after {
    background: url("../../assets/images/hnico/ic_girl.png") no-repeat center center;
    background-size: 100% 100%;
  }
  .m-panel{ overflow:hidden;}
</style>
